<template>
   <div class="my-tag">
              <input
                v-if="isEdit"
                v-focus
                class="input"
                type="text"
                @blur="isEdit=false"
                placeholder="输入标签"
                :value="value"
                @keyup.enter="handle"
              />
     <div v-else class="text" @dblclick="show">
      {{ value }}
     </div>
   </div>
</template>

<script>
export default {
  props:{
   value:String
  },
data(){
  return {
    isEdit:false
  }
},
methods:{
  show(){
    this.isEdit=true
//     this.$nextTick(()=>{
// this.$refs.inp.focus()
//     })这是第一张自动获取焦点的方法，用ref和$refs获取，还有第二种，利用全局注册一个自定义指令v-focus()

  },
  handle(e){
    if(e.target.value===''){
      alert('请输入名称')
      return
    }
    //需要子传父，把数据传回去回显
    //因为用的v-model关联，需要触发input事件
    this.$emit('input',e.target.value)
    this.isEdit=false
  }
}

}
</script>

<style lang="less" scoped>
 .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
</style>